<template>
  <div class="userim">
    <div class="userim-title">
      <div class="tit-le">
        <i @click="$router.replace('message')" class="iconfont icon-arrow-right"></i>
      </div>
      <div class="tit-rg">
        <span>{{ userlist.toid.username }}</span>
      </div>
    </div>
    <div class="im-body" ref="box">
      <div
        v-show="item.from == uid && item.to == userlist.to || item.from == userlist.to && item.to == uid"
        :class="item.from == uid ? 'masg-rg-box' : 'masg-le-box' "
        v-for="(item,index) of messagelist"
        :key="index">
        <div v-if="item.from == userlist.to && item.to == uid" class="box-le">
          <img :src="item.tofrom.uportrait" alt="">
        </div>
        <div class="box-rg">
          <div class="rg-mssage">
            <span>{{ item.message }}</span>
          </div>
          <div class="rg-time">
            <span>{{ item.newTime }}</span>
          </div>
        </div>
        <div v-if="item.from == uid && item.to == userlist.to" class="box-le">
          <img :src="userlist.fromid.uportrait" alt="">
        </div>
      </div>
    </div>
    <div class="im-cont">
      <van-search
        left-icon=""
        v-model="imtext"
        show-action
        placeholder="请输入聊天内容..."
        @search="onSearch"
        shape="round"
      >
        <template #action>
          <van-button
            round
            @click="onSearch"
            color="#ec8d55"
            size="small">发送
          </van-button>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>
import time from "@/Photography/assets/js/time";

export default {
  name: 'userim',
  data(){
    return{
      imtext: '',
      userlist: {},
      messagelist: [],
      uid: ''
    }
  },
  created() {
    // 拿取缓存 params vuex
    this.uid = localStorage.getItem('uid');
    this.userlist = this.$route.params;
    this.messagelist = this.$store.state.messagelist;
    this.messagelist.forEach(r=>{
      r.newTime = time.timeago(r.sendTime)
    })
    console.info(this.userlist);
  },
  methods:{
    scroll(){
      // 保持聊天框在底部
      var div = this.$refs.box;
      setTimeout(()=>{
        div.scrollTop = div.scrollHeight;
      });
    },
    async onSearch(){
      // socket发送
      const from = this.userlist.from;
      const to = this.userlist.to;
      console.info('文章',this.imtext);
      this.$socket.emit('vsendmeg', {from,to,message:this.imtext});
      const msg = {
        from,
        to,
        message: this.imtext,
        touser: this.userlist.toid,
        tofrom: this.userlist.fromid,
        sendTime: Date.now(),
      };
      // 将发送消息存入vuex
      this.$store.commit('messlist', msg);
      this.imtext = '';
      document.getElementsByClassName("van-field__control")[0].focus()
      try {
        const res = await this.$axios({
          url: '/blog/setsocketim',
          method: 'post',
          data: msg
        })
        const { success } = res.data
        if(success){
          console.info(msg)
        }
      }catch (e) {

      }
    },

  },
  watch:{
    // 监听消息的变化
    messagelist(){
      this.scroll();
      this.messagelist.forEach(r=>{
        r.newTime = time.timeago(r.sendTime)
      })
      console.info(this.messagelist);
    },
  },
};
</script>

<style scoped lang="scss">
.userim{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .userim-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    border-bottom: 1px solid #f1f0f0;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .im-body{
    flex: 1;
    overflow-y: auto;
    padding: 0 vw(40);
    box-sizing: border-box;
    background-color: #ffffff;
    .masg-le-box{
      display: flex;
      .box-le{
        padding-right: vw(20);
        padding-top: vw(20);
        img{
          width: vw(100);
          height: vw(100);
          border-radius: 50%;
          object-fit: cover;
        }
      }
      .box-rg{
        flex: 1;
        .rg-mssage{
          display: inline-block;
          background-color: #f5f5f5;
          border-radius: vw(25);
          margin-top: vw(35);
          padding: vw(10) vw(30);
          margin-right: vw(100);
          span{
            font-size: vw(30);
          }
        }
        .rg-time{
          margin-top: vw(20);
          font-size: vw(20);
          color: #dadada;
        }
      }
    }
    .masg-rg-box{
      display: flex;
      .box-le{
        padding-left: vw(20);
        padding-top: vw(20);
        img{
          width: vw(100);
          height: vw(100);
          border-radius: 50%;
          object-fit: cover;
        }
      }
      .box-rg{
        flex: 1;
        text-align: right;
        .rg-mssage{
          display: inline-block;
          background-color: #f5f5f5;
          border-radius: vw(25);
          margin-top: vw(35);
          padding: vw(10) vw(30);
          margin-left: vw(100);
          span{
            font-size: vw(30);
          }
        }
        .rg-time{
          margin-top: vw(20);
          font-size: vw(20);
          color: #dadada;
        }
      }
    }
  }
  .im-cont{
    ::v-deep .van-button--small{
      padding: 0 vw(34);
    }
  }
}
</style>
